import React from 'react';
import classnames from 'classnames';
import Layout from '@theme/Layout';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useBaseUrl from '@docusaurus/useBaseUrl';
import styles from './styles.module.css';

const features = [
  {
    title: <>About</>,
    link: 'docs/CONTRIBUTING',
    description: (
      <>
        Release notes and docs contribution guidelines
      </>
    ),
  },
  {
    title: <>Getting Started</>,
    link: 'docs/intro_getting_started',
    description: (
      <>
        Install and set up your 128T
      </>
    ),
  },
  {
    title: <>Concepts</>,
    link: 'docs/concepts_glossary',
    description: (
      <>
        128T architecture concepts and components
      </>
    ),
  },
  {
    title: <>Administration</>,
    link: 'docs/config_audit_log',
    description: (
      <>
        Manage 128T software lifecycle and configuration
      </>
    ),
  },
  {
    title: <>Events</>,
    link: 'docs/events',
    description: (
      <>
        Understand alarms and events generated by 128T
      </>
    ),
  },
  {
    title: <>Best Practices</>,
    link: 'docs/bcp_conductor_deployment',
    description: (
      <>
        Recommended guides and design patterns
      </>
    ),
  },
  {
    title: <>CLI Reference</>,
    link: 'docs/cli_reference',
    description: (
      <>
        Settings and functionality of the 128T CLI
      </>
    ),
  },
  {
    title: <>Plugins</>,
    link: 'docs/monitoring_agent',
    description: (
      <>
        Extend 128T functionality with plugins
      </>
    ),
  },
  {
    title: <>APIs</>,
    link: 'docs/apis_rest',
    description: (
      <>
        Automate and integrate with the 128T APIs
      </>
    ),
  }
];

function Feature({link, title, description}) {
  const href = useBaseUrl(link);
  return (
    <div className={classnames('col col--4', styles.feature)}>
      <Link to={href}>
        <h3>{title}</h3>
      </Link>
      <p>{description}</p>
    </div>
  );
}

function Home() {
  const context = useDocusaurusContext();
  const {siteConfig = {}} = context;
  return (
    <Layout
      title={`Home`}
      description="The source for documentation of the 128 Technology Networking Platform.">
      <header className={classnames('hero hero--primary', styles.heroBanner)}>
        <div className="container">
          <div className="heroTitle">128T Networking Platform</div>
          <p className="hero__subtitle">Product Docs</p>
        </div>
      </header>
      <main>
        <section className={styles.features}>
          <div className="container">
            <div className="row">
              <div className={classnames('col col--4', styles.feature)}>
                <p>Your 128T is an innovative software router built around the services which matter.</p>

                <p>Deliver your sessions tunnel-free, with Secure Vector Routing.
                Segment and secure your endpoints with network tenancy.
                Automate using the APIs of a routing platform made with modern software.
                128T Docs is your guide to the platform's features and capabilities.
                </p>

                <p>Get started building services with a 128T router that understands them.</p>
              </div>
              <div className={classnames('col col--8', styles.feature)}>
                <img src="/img/128t-components.png" alt="128T Networking Platform" />
              </div>
            </div>
          </div>
        </section>
        {features && features.length && (
          <section className={styles.features}>
            <div className="container">
              <div className="row">
                {features.map(({title, link, description}) => (
                  <Feature
                    key={title.props.children}
                    title={title}
                    link={link}
                    description={description}
                  />
                ))}
              </div>
            </div>
          </section>
        )}
      </main>
    </Layout>
  );
}

export default Home;
